<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>5-5 监听类方法</title>
</head>
<body>
<div id="app">
  <component-a></component-a>
</div>
<script src="../lib/vue.global.js" type="text/javascript"></script>
<script>
  const { createApp, ref, reactive, toRef, toRefs, computed } = Vue

  const componentA = {
    setup(props, ctx) {
      const state = reactive({
        name: 'kola',
        age: 18,
        grade: {
          'js': 100,
          'java': 99
        }
      })

      const count = ref(0)

      // const info = computed(() => {
      //   console.log('computed')
      //   return `${state.name}, ${state.age}`
      // })

      const info = computed({
        get: () => `${state.name}, ${state.age}`,
        set: (val) => state.age = val - 1
      })

      const stop = Vue.watchEffect(() => {
        console.log('watchEffect')
        console.log(state.name)
        console.log(info.value)
      })

      stop()  // 停止监听

      Vue.watch([state, count], (val, prevVal) => {
        console.log('watch', val, prevVal)
      })  // watch响应式对象，默认是深度监听

      Vue.watch(() => state, (val, prevVal) => {
        console.log('watch2', val, prevVal)
      }, {
        deep: true,
      })

      return {
        state,
        count,
        info
      }
    },
    template: `
      <div>
        <div>{{ state.name }}</div>
        <div>{{ info }}</div>
        <div>count: {{ count }}</div>
        <div><input type='button' @click='count++' value='+1'></div>
      </div>`
  }

  createApp({
    components: {
      'component-a': componentA,
    },
  }).mount('#app')
</script>
</body>
</html>
